import React, { useEffect } from 'react';
import * as echarts from 'echarts/lib/echarts';
import { Button } from 'antd';

const LineEcharts = () => {
  const symbolSize = 20;
  const data = [
    [40, -10],
    [-30, -5],
    [-76.5, 20],
    [-63.5, 40],
    [-22.1, 50],
  ];
  const option = {
    title: {
      text: 'Try Dragging these Points',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      },
    },
    grid: {
      top: '8%',
      bottom: '12%',
    },

    xAxis: {
      type: 'category',
      data: [
        '2023-05-30',
        '2023-06-01',
        '2023-06-02',
        '2023-06-03',
        '2023-06-04',
        '2023-06-05',
        '2023-06-06',
      ],
      boundaryGap: false,
      axisLine: { onZero: false },
      splitLine: { show: false },
      min: 'dataMin',
      max: 'dataMax',
      axisPointer: {
        z: 100,
      },
    },
    yAxis: {
      type: 'value',
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false,
        },
        brush: {
          type: ['lineX', 'clear'],
        },
      },
    },
    brush: {
      xAxisIndex: 'all',
      brushLink: 'all',
      outOfBrush: {
        colorAlpha: 0.1,
      },
    },
    dataZoom: [
      {
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'slider',
        yAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'inside',
        xAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'inside',
        yAxisIndex: 0,
        filterMode: 'none',
      },
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
      },
    ],
  };
  let myChart = null;
  useEffect(() => {
    myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);
    var myChart2 = echarts.init(document.getElementById('main2'));
    myChart2.setOption(option);
    myChart.group = 'group1';
    myChart2.group = 'group1';
    // myChart.dispatchAction({
    //     type: 'brush',
    //     areas: [
    //       {
    //         brushType: 'lineX',
    //         coordRange: ['2023-06-05', '2023-06-06'],
    //         xAxisIndex: 0
    //       }
    //     ]
    //   });
    echarts.connect('group1');
  }, []);

  const onClick = () => {
    console.log('myChart', myChart);
    myChart.dispatchAction({
      type: 'brush',
      areas: [
        {
          brushType: 'lineX',
          coordRange: ['2023-06-05', '2023-06-06'],
          xAxisIndex: 0,
        },
      ],
    });
  };
  return (
    <div style={{ width: '100%' }}>
      <Button onClick={onClick}>增加点击事件</Button>
      <div
        id="main"
        style={{
          width: '100%',
          height: 400,
        }}
      >
        {' '}
      </div>
      <div
        id="main2"
        style={{
          width: '100%',
          height: 400,
        }}
      >
        {' '}
      </div>
    </div>
  );
};
export default LineEcharts;
